<template>
    <view class="content">
        <view class="bg"></view>
        <view class="top">
            <image :src="info.image || '../../static/icon/avatar.png'" class="avatar"></image>
            <view class="name">{{info.name || info.user_name || '用户名内容'}}</view>
        </view>
        
        <!-- 个人信息 -->
        <image src="../../static/image/s_us.png" class="s-us" @click="toPage(`/pagesA/info/info`)"></image>
        
        <view class="box">
            <view class="o-top">
                <view class="o-title">运单管理</view>
                <view class="o-more" @click="toPage('/pagesA/order/order?type=1')">
                    <text>查看全部</text>
                    <u-icon name="arrow-right" color="#cdcdcd" size="28"></u-icon>
                </view>
            </view>
            <view class="ord-box">
            	<view class="wid" @click="toPage('/pagesA/order/order?type=1')">
            		<image src="../../static/icon/icon_12.png" mode=""></image>
                    <view class="ord-num" :class="{'ord-num2' : info.count1 > 9 }" v-if="info.count1 > 0">
                        {{info.count1 > 99 ? '99+' : info.count1}}
                    </view>
            		<view class="ord-t">已接单</view>
            	</view>
				<view class="wid" @click="toPage('/pagesA/order/order?type=2')">
					<image src="../../static/icon/icon_15.png" mode=""></image>
					<view class="ord-num" :class="{'ord-num2' : info.count2 > 9 }" v-if="info.count2 > 0">
					    {{info.count2 > 99 ? '99+' : info.count2}}
					</view>
					<view class="ord-t">已拒绝</view>
				</view>
            	<view class="wid" @click="toPage('/pagesA/order/order?type=3')">
            		<image src="../../static/icon/icon_13.png" mode=""></image>
                    <view class="ord-num" :class="{'ord-num2' : info.count3 > 9 }" v-if="info.count3 > 0">
                        {{info.count3 > 99 ? '99+' : info.count3}}
                    </view>
            		<view class="ord-t">运输中</view>
            	</view>
            	<view class="wid" @click="toPage('/pagesA/order/order?type=4')">
            		<image src="../../static/icon/icon_16.png" mode=""></image>
            		<view class="ord-t">已完成</view>
            	</view>
            </view>
        </view>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#00457f" inactive-color="#5d5f6a" :border-top="true" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                current: 0, //底部导航索引
                tab_list: [],
				info: {},
            };
        },
        onLoad() {
            // 接收身份监听
            uni.$on('identityChange', data => {
                this.tabbarInfo();
            })
        },
        onShow() {
            if (this.$getSync('userToken')) {
            	this.getInfo()
            }
			this.tabbarInfo();
        },
        methods: {
			toPage(url) {
			    if (!uni.getStorageSync('userToken')) {
			        this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
			            uni.navigateTo({
			                url: "/pagesA/login/login"
			            })
			        })
			    } else if (!uni.getStorageSync('MOBILE')) {
			        this.$confirm('您还没有绑定手机号，是否去绑定？',()=>{
			            uni.navigateTo({
			                url: "/pagesA/login/login?show=1"
			            })
			        })
			    } else if (this.info.status == 0) {
					// status 0未认证 1待审核 2通过 3驳回
					this.$gTo(`/pagesA/apply/apply-1`)
				} else if (this.info.status == 1) {
					this.$gTo(`/pagesA/apply/apply-3`)
				} else if (this.info.status == 2) {
					this.$gTo(url)
				} else if (this.info.status == 3) {
					this.$gTo(`/pagesA/apply/apply-1`)
				}
			},
			
			getInfo() {
			    this.$ajax('user_detail', {
			        user_token: this.$getSync('userToken'),
			    }).then(ret => {
			        if (ret.success == 1000) {
			            this.info = ret.detail
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
			
            
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
            
            tabbarInfo(){
                // 用户
                if (this.$getSync('identity') == 1) {
                    this.tab_list = [
                        {
                            iconPath: "/static/icon/tab_01.png",
                            selectedIconPath: "/static/icon/tab_02.png",
                            text: '发货',
                            pagePath: "/pages/tabbar/index"
                        },{
                            iconPath: "/static/icon/tab_03.png",
                            selectedIconPath: "/static/icon/tab_04.png",
                            text: '订单',
                            pagePath: "/pages/tabbar/order"
                        },{
                            iconPath: "/static/icon/tab_05.png",
                            selectedIconPath: "/static/icon/tab_06.png",
                            text: '我的',
                            pagePath: "/pages/tabbar/mine"
                        }
                    ];
                }
                // 司机
                if(this.$getSync('identity') == 2){
                    this.tab_list = [
                        {
                            iconPath: "/static/icon/tab_01.png",
                            selectedIconPath: "/static/icon/tab_02.png",
                            text: '首页',
                            pagePath: "/pages/tabbar/driver"
                        },{
                            iconPath: "/static/icon/tab_05.png",
                            selectedIconPath: "/static/icon/tab_06.png",
                            text: '我的',
                            pagePath: "/pages/tabbar/driver-mine"
                        }
                    ];
                }
            },
            
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx;
    }
    .bg {
    	width: 100%;
    	height: 500rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
        background: linear-gradient(to bottom, #004580,#18568c, #f2f4fa);
    }
    
    .top{
        padding-left: 20rpx;
        padding-bottom: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .avatar{
        width: 110rpx;
        height: 110rpx;
        border: 2rpx solid #fff;
        border-radius: 50%;
        margin-right: 28rpx;
    }
    .name{
        flex: 1;
        font-size: 35rpx;
        font-weight: bold;
        color: #fff;
    }
    .s-us{
        width: 710rpx;
        height: 102rpx;
        margin-bottom: 20rpx;
    }
    
    .box{
        background-color: #fff;
        border-radius: 20rpx;
        padding: 0 25rpx;
        margin-bottom: 16rpx;
    }
    .o-top{
        padding-top: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .o-title{
        font-size: 30rpx;
        color: #101d36;
        font-weight: bold;
    }
    .o-more{
        font-size: 24rpx;
        color: #a8a8a8;
    }
    .ord-box {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        padding: 35rpx 0 40rpx;
    }
    .wid {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        
    	image {
    		width: 46rpx;
    		height: 46rpx;
    		margin-bottom: 10rpx;
    	}
        
        .ord-num{
            font-size: 22rpx;
            line-height: 1;
            color: #fff;
            padding: 5rpx 8rpx;
            background-color: #fa3c07;
            border-radius: 50%;
            position: absolute;
            right: -10rpx;
            top: -10rpx;
        }
        .ord-num2{
            font-size: 22rpx;
            line-height: 1;
            color: #fff;
            padding: 6rpx 4.5rpx;
            background-color: #fa3c07;
            border-radius: 50%;
            position: absolute;
            right: -10rpx;
            top: -10rpx;
        }
    	.ord-t {
    		font-size: 25rpx;
    	}
    }

</style>
